<!--
 * @Author: didiplus
 * @Description: 
 * @Date: 2025-08-07 22:10:57
 * @LastEditors: didiplus
 * @LastEditTime: 2025-08-08 12:48:16
 * @FilePath: /script/StarInspect/index.html
 * @Version: 1.0
-->
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <title>服务器巡检面板</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- Flatpickr 样式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <!-- Flatpickr 脚本 -->
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <!-- flatpickr 中文语言包 -->
    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/zh.js"></script>


    <style>
        body {
            background: linear-gradient(to right, #f8fafc, #e0f2fe);
        }

        .glass-card {
            backdrop-filter: blur(12px);
            background: rgba(255, 255, 255, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        }

        .tab-active {
            background-color: #1d4ed8 !important;
            color: white !important;
        }

        .host-button {
            display: flex;
            align-items: center;
            height: 3rem;
            font-size: 1rem;
            line-height: 30px;
        }
    </style>
</head>

<body class="p-6 min-h-screen text-gray-800">
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 h-[90vh]">
        <!-- 主机列表 -->
        <div class="col-span-1/2 glass-card rounded-xl overflow-y-auto">
            <h2 class="text-2xl font-bold p-5 border-b border-base-300">主机列表</h2>
            <ul id="hostList" class="menu p-4 space-y-2"></ul>
              <!-- 分页控件 -->
            <div id="pagination" class="flex justify-center gap-2"></div>
        </div>

        <!-- 主机详情 -->
        <div class="col-span-3 glass-card rounded-xl p-6 overflow-y-auto">
            <!-- 标题 + 日期选择同行 -->
            <div class="flex justify-between items-center mb-4 flex-wrap gap-2">
                <h2 class="text-2xl md:text-3xl font-extrabold text-blue-900">
                    服务器巡检详情
                </h2>

                <div class="flex items-center gap-2">
                    <label class="text-sm text-gray-500 whitespace-nowrap">
                        选择巡检日期:
                    </label>
                    <input id="inspectDate" class="input input-bordered input-sm w-44" placeholder="请选择日期" readonly />
                </div>
            </div>


            <!-- 主机详情内容 -->
            <div id="hostDetails" class="space-y-6"></div>
        </div>

    </div>


    <script src="./js/index.js"></script>
</body>

</html>